<template>
  <div class="area-send-message">
    <div class="toText">{{scriptItem.label}}</div>
    <el-checkbox-group v-model="checkList" @change="checkBoxGrounpChange">
      <el-select v-model="value" multiple filterable popper-class="select_box" @change="selectBoxChagne" :placeholder="$t('placeholder.sr')">
        <el-option-group
          v-for="group in options"
          :key="group.label"
          :label="group.label">
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item[scriptItem.emailLable]"
            :value="item[scriptItem.emailValue]">
            <el-checkbox @click.native="(e) => {e.preventDefault()}" :label="item[scriptItem.emailLable]"></el-checkbox>
          </el-option>
        </el-option-group>
      </el-select>
    </el-checkbox-group>
    <!-- <div class="select"
         v-if="scriptItem.showSelect">
      <el-checkbox v-model="dataForm[scriptItem.text][scriptItem.selectChose]"
                   class="check-bot"></el-checkbox>
      <el-select v-model="dataForm[scriptItem.text][scriptItem.selectValue]"
                 filterable
                 clearable
                 :multiple="scriptItem.showMultipleSelectValue"
                 :collapse-tags="scriptItem.showCollapseTags"
                 :placeholder="scriptItem.selectHint">
        <el-option v-for="(its, index) in scriptItem[scriptItem.toSelectListField]"
                   :key="index"
                   :label="its.lable"
                   :value="its.value"></el-option>
      </el-select>
    </div>
    <div class="email"
         v-if="scriptItem.showEmail">
      <el-checkbox v-model="dataForm[scriptItem.text][scriptItem.emailChose]"
                   class="check-bot"></el-checkbox>
      <el-checkbox-group v-model="checkList" @change="checkBoxGrounpChange">
        <el-select v-model="dataForm[scriptItem.text][scriptItem.emailFields]"
                  filterable
                  clearable
                  :multiple="scriptItem.showMultiple"
                  :collapse-tags="scriptItem.showCollapseTags"
                  :placeholder="scriptItem.EmailHint"
                  @change="selectBoxChagne"
                  @click.native="(e) => {e.preventDefault()}"
                  default-first-option>
          <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]"
                    :key="ii"
                    :value="o[scriptItem.emailValue]"
                    :label="o[scriptItem.emailLable]"><el-checkbox @click.native="(e) => {e.preventDefault()}" :label="o[scriptItem.emailLable]"></el-checkbox></el-option>
        </el-select>
      </el-checkbox-group>
    </div> -->
  </div>
</template>

<script>
import { debounce } from 'lodash'
export default {
  props: {
    dataForm: {
      type: Object,
      default: () => { }
    },
    scriptItem: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      selectDataObj: {},
      interfaceNoDataCount: 0,
      checkList: [],
      options: [{
        label: 'From Dataset Field',
        options: []
      }, {
        label: 'From User List',
        options: []
      }],
      value: ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getToSelectListFieldList()
      if (this.scriptItem.interfaceUrl) {
        this.getEmailSelectDataList(this.scriptItem)
      }
      if (this.scriptItem.userTypeFieldsUrl) {
        this.getUserTypeFieldstDataList(this.scriptItem)
      }
    },
    getEmailSelectDataList (item) {
      const url = item.interfaceUrl
      const params = {
        status: true
      }
      this.$interface.clientReport.getBoardListForBotApi(url, params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.resetDataLists(item)
            return this.$message.error(res.msg)
          }
          if (res.data) {
            let datas = res.data
            datas.forEach(it => {
              if (!it.hasOwnProperty(item.emailFields)) {
                it[item.emailFields] = it[item.emailValue]
              }
            })
            this.selectDataObj[`${item.text}ListsOrigin`] = datas
            this.selectDataObj = Object.assign({}, this.selectDataObj)
            this.options[1].options = this.selectDataObj[`${this.scriptItem.text}ListsOrigin`]
            if (res.data.length <= 0) {
              this.resetDataLists(item)
            }
          }
        }).catch(() => {
          this.resetDataLists(item)
        })
    },
    getUserTypeFieldstDataList (item) {

    },
    resetDataLists: debounce(function (item) {
      this.interfaceNoDataCount++
      if (this.interfaceNoDataCount > 5) {
        return false
      }
      this.getEmailSelectDataList(item)
    }, 2000),
    getKeyList (param) {
      if (Array.isArray(param)) {
        this.scriptItem[this.scriptItem.toSelectListField] = param
      }
      this.dataForm[this.scriptItem.text] = JSON.parse(JSON.stringify(this.scriptItem.defaultValue))
    },
    getToSelectListFieldList () {
      let id = this.$store.state.bot.id
      let type = this.$store.state.bot.type
      if (!id) {
        this.scriptItem[this.scriptItem.toSelectListField] = []
        return
      }
      this.scriptItem[this.scriptItem.toSelectListField] = []
      const params = {}
      type === 'dataset' && (params['datasetId'] = id)
      type === 'widget' && (params['gadgetId'] = id)
      this.$interface.reports.getFieldsListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.scriptItem[this.scriptItem.toSelectListField] = []
            return false
          }
          res.data.forEach(item => {
            if (item.type === 'user') {
              this.scriptItem[this.scriptItem.toSelectListField].push({
                label: item.name,
                value: item.name,
                type: item.type
              })
            }
          })
        }).catch(() => {
          this.scriptItem[this.scriptItem.toSelectListField] = []
        })
    },
    checkBoxGrounpChange (e) {
      this.dataForm[this.scriptItem.text][this.scriptItem.emailFields] = e
    },
    selectBoxChagne (e) {
      this.checkList = e
    }
  }
}
</script>

<style scoped lang='scss'>
.area-send-message {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  box-shadow: 0px -1px 0px 0px #F0F0F0, 0px 1px 0px 0px #F0F0F0;
  margin: 10px 0;
  .select,
  .email {
    // width: 50%;
    padding-left: 10px;
    display: flex;
    justify-content: flex-start;
    .check-bot {
      margin-right: 10px;
    }
  }
  .email{
    margin-left: 15px;
  }
  >div:nth-child(2){
    flex: 1;
    >div:nth-child(1){
      width: 100%;
    }
    ::v-deep .el-input__inner{
      border: 0;
    }
    ::v-deep .el-tag{
      height: 30px;
      line-height: 28px;
      background-color: #F0F0F0;
      color: #404040;
      margin: 5px 0 5px 10px;
    }
  }
  .select_box{
    flex: 1;
  }
  .toText{
    font-size: 14px;
    font-weight: 400;
    color: #404040;
    line-height: 20px;
    margin-top: 6px;
  }
}
</style>
